<template>
  <div id='box'>
    <h1>动态路由</h1>
    <div class="con">
      <RouterLink :to="{ name: 'routerson', params: { id: '1' } }">子路由1</RouterLink>
      <RouterLink :to="{ name: 'routerson', params: { id: '2' } }">子路由2</RouterLink>
      <RouterLink :to="{ name: 'routerson', params: { id: '3' } }">子路由3</RouterLink>
      <RouterView></RouterView>
    </div>
  </div>
</template>

<script lang='ts'>
export default {
  name: '动态路由'
}
</script>

<script lang='ts' setup>
import { ref } from 'vue';
import routerson from './components/routerson.vue';
</script>

<style lang='scss' scoped>
.con {
  display: flex;
  justify-content: center;
  align-items: start;
}

a {
  text-align: center;
  justify-content: center;
  align-items: center;
  width: 200px;
  height: 30px;
  box-sizing: border-box;
}
</style>
